import React, { Component, Fragment } from 'react';
import StandardTable from '@/components/StandardTable';
import { Icon, Form, Input, Modal, Select, Row, Col, Upload, DatePicker } from 'antd';
import { connect } from 'dva';
import AntdUpload from '@/components/AntdUpload';
import styles from '@/pages/Info.less';
import moment from 'moment';
import SearchSelect from '@/components/SearchSelect';
import { formatFile, getNowFormatDate } from '@/pages/Common/common';
import prompt from '@/components/Prompt';
import AdSelect from '@/components/AdSelect';
import { codes, NoticeMode } from './utils';
import AdSearch from '@/components/AdSearch';

const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { Option } = Select;
const dateFormat = 'YYYY-MM-DD';

@connect(({ events, loading, common, component }) => ({
  events,
  loading: loading.effects['events/eventsDetails'],
  dictObject: common.dictObject,
  searchValue: component.searchValue,
}))
@Form.create()
export default class DictInfo extends Component {
  state = {
    selectedRows: [],
    currentId: '',
  };
  componentDidMount() {
    this.props.onRef(this);
  }

  columns = [
    {
      title: '账号',
      dataIndex: 'receiverNo',
      // render: (text, record) =>
      //   this.props.type === 'list' ? (
      //     <a onClick={() => this.showDetail(record)}>{text}</a>
      //   ) : (
      //     <span>{text}</span>
      //   ),
    },
    {
      title: '通知方式',
      dataIndex: '通知方式',
      render: text => <AdSelect data={NoticeMode} value={this.props.noticeMode} onlyRead={true} />,
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
    },
    {
      title: '更新人',
      dataIndex: 'updateBy',
      render: text => (
        <AdSearch
          label="loginName"
          name="sysName"
          value={this.props.searchValue[text]}
          onlyRead={true}
        />
      ),
    },
  ];

  showDetail = record => {
    const { id } = record;
    const { dispatch, operateInfo } = this.props;
    dispatch({
      type: 'events/eventsDetails',
      payload: { id },
      callback: res => {
        operateInfo();
        this.setState({
          currentId: id,
        });
      },
    });
  };

  // 新增或编辑操作
  handleOk = () => {
    const { form, dispatch, id, handleCancel } = this.props;
    const { currentId } = this.state;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      values.eventId = id;
      if (currentId) {
        values.id = currentId;
      }
      dispatch({
        type: 'events/eventReceiverOperate',
        payload: values,
        callback: res => {
          this.getEvenInfo({ id });
          this.handleCancel();
        },
      });
    });
  };

  handleSelectRows = rows => {
    const { getSelectedRows } = this.props;
    let ids = [];
    if (Array.isArray(rows) && rows.length > 0) {
      rows.map((item, i) => {
        ids.push(item.id);
      });
    }
    this.setState({
      selectedRows: rows,
      checkIds: ids,
    });
    getSelectedRows(rows);
  };

  handleCancel = () => {
    const { handleCancel } = this.props;
    handleCancel();
    this.setState({
      auths: [],
      fileList: [],
    });
  };
  getEvenInfo = params => {
    const { dispatch } = this.props;
    params.pageSize = 500;
    dispatch({
      type: 'events/eventReceiverList',
      payload: params,
      callback: data => {
        // console.log('data', data);
        this.getUserData(data);
      },
    });
  };

  //删除：
  delReceiver = () => {
    const { dispatch, id } = this.props;
    const { checkIds, formValues } = this.state;
    let params = {};
    params.ids = checkIds;
    dispatch({
      type: 'events/eventReceiverDelete',
      payload: params,
      callback: res => {
        this.getEvenInfo({ id });
      },
    });
  };
  // 明细翻页
  handleStandardTableChange = param => {
    const { dispatch } = this.props;
    // const { searchValue } = this.state;
    const params = {
      // ...searchValue,
      ...param,
    };
    // this.dispatchFun('abnormal/userList', params);
  };
  //人员列表回写：
  getUserData = data => {
    const { dispatch, searchValue } = this.props;
    if (!data) return;
    let valueList = [];
    data.map(v => {
      const labels = ['updateBy'];
      labels.map(item => {
        if (v[item] && !valueList.includes(v[item])) {
          valueList.push(v[item]);
          !searchValue[v[item]] &&
            dispatch({
              type: 'component/querySearchValue',
              payload: {
                params: { loginName: v[item] },
                url: 'tms/abnormal-info/selectUser',
              },
            });
        }
      });
    });
  };

  render() {
    const {
      loading,
      data,
      change,
      visible,
      handleCancel,
      form: { getFieldDecorator },
      id,
      type,
      listType,
      events: { dictDataDetails },
      dictObject,
      columns1,
      curStateVal,
      disabled,
    } = this.props;
    const { selectedRows, currentId } = this.state;
    const infoDetail = currentId ? dictDataDetails[currentId] : {};
    console.log('this.props.noticeMode', this.props.noticeMode);

    return (
      <Fragment>
        <StandardTable
          loading={loading}
          data={id ? { list: data } : {}}
          disabledRowSelected={curStateVal}
          scrollX={500}
          scrollY={200}
          columns={this.columns}
          onPaginationChange={this.handleStandardTableChange}
          selectedRows={selectedRows}
          onSelectRow={this.handleSelectRows}
          disabledRowSelected={disabled || type !== 'list'}
        />
        {visible && (
          <Modal
            title="新增接收方"
            visible={visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            width={620}
            style={{ top: 20 }}
            destroyOnClose={true}
          >
            <div className={styles.tableListForm}>
              <Form layout="inline">
                <Row gutter={{ md: 4, lg: 12, xl: 24 }}>
                  <Col md={{ span: 24 }} sm={24}>
                    <Form.Item label="接收方账号">
                      {getFieldDecorator('receiverNo', {
                        rules: [{ required: true, message: '请输入' }],
                        initialValue: infoDetail.receiverNo || '',
                      })(<Input placeholder="请输入" />)}
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            </div>
          </Modal>
        )}
      </Fragment>
    );
  }
}
